<template>
    <div>
        <div style="margin-bottom: 10%">
            <div class="tip">
                <p>企业信息</p>
            </div>
            <div class="wrap clearfix" style="margin: 0 15px;">
                <div class="item clearfix">
                    <div class="left">企业名称：</div>
                    <div class="over">{{companyInfo.name | nullFilter}}</div>
                </div>
                <div class="item clearfix">
                    <div class="left">企业类型：</div>
                    <div class="over">
                        <span v-if="!companyInfo.unitType">暂无数据</span>
                        <el-tag type='info' v-else class="rit5" v-for="tag in split(companyInfo.unitType)">
                            {{tag}}
                        </el-tag>
                    </div>
                </div>
                <div class="item clearfix">
                    <div class="left">企业地址：</div>
                    <div class="over">{{companyInfo.address | nullFilter}}</div>
                </div>
                <div class="item clearfix">
                    <div class="left">企业规模：</div>
                    <div class="over">{{companyInfo.companyScale | nullFilter}}</div>
                </div>
                <div class="item clearfix">
                    <div class="left">联系人1：</div>
                    <div class="over">{{companyInfo.contactPeople1 | nullFilter}}</div>
                </div>
                <div class="item clearfix">
                    <div class="left">联系人1手机：</div>
                    <div class="over">{{companyInfo.phone | nullFilter}}</div>
                </div>
                <div class="item clearfix">
                    <div class="left">联系人2：</div>
                    <div class="over">{{companyInfo.contactPeople2 | nullFilter}}</div>
                </div>
                <div class="item clearfix">
                    <div class="left">联系人2手机：</div>
                    <div class="over">{{companyInfo.phone2 | nullFilter}}</div>
                </div>
            </div>
            <div class="tip">
                <p>动态人力资源信息录入</p>
            </div>
            <div class="wrap">
                <el-form ref="form" :model="data" label-width="150px" size="mini">
                    <el-form-item label="数据所属月份" required="true">
                        <el-date-picker v-model="data.dataMonth"
                                        type="month"
                                        style="width: 100%"
                                        value-format="yyyy-MM"
                                        @blur="this.dateChange"
                                        placeholder="选择月">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="上月末从业人员数" required="true">
                        <el-input type="number" v-model="data.beforeMonthEndWorkCount"/>
                    </el-form-item>
                    <el-form-item label="本期实际招工人员数" required="true">
                        <el-input type="number" v-model="data.realWorkCount"/>
                    </el-form-item>
                    <el-form-item label="期望招工人员数：" required="true">
                        <el-input type="number" v-model="data.expectWorkCount"/>
                    </el-form-item>
                    <el-form-item label="本月缺工人员数" required="true">
                        <el-input type="number" v-model="data.thisMonthLackCount"/>
                    </el-form-item>
                    <el-form-item label="本月减员人员数" required="true">
                        <el-input type="number" v-model="data.thisMonthLessCount"/>
                    </el-form-item>
                    <el-form-item label="月末从业人员数" required="true">
                        <el-input type="number" v-model="data.thisMonthEndWorkCount"/>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="toolbar-bottom-right">
            <el-button type="primary" @click="insert">保存</el-button>
            <el-button @click="back('WxIndex')">取消</el-button>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Kit from "@/core/mixin/Kit";
    import {rule} from "@/core/utils/rule";
    import $http from "@/core/utils/http";
    import {API} from "@/core/api/API";
    import {getUserInfo} from "@/core/utils/storage";
    import {verdictDate} from "@/core/utils/validate";
    import {ElForm} from "element-ui/types/form";
    import {MessageBox, Toast} from 'mint-ui';

    @Component({
        name: 'DynamicHumanWx',
        components: {MessageBox},
    })
    export default class DynamicHumanWx extends mixins(BaseVue, Kit) {

        data: any = {
            dataMonth: new Date()
        };

        companyInfo: any = {};

        //关闭时是否刷新分页
        backRefresh: boolean = false;

        mRules = {
            dataMonth: [rule.notNullBlur()],
            beforeMonthEndWorkCount: [rule.notNullBlur()],
            realWorkCount: [rule.notNullBlur()],
            thisMonthLackCount: [rule.notNullBlur()],
            thisMonthLessCount: [rule.notNullBlur()],
            thisMonthEndWorkCount: [rule.notNullBlur()],
        };

        //初始化
        async mounted() {
            // 查询用户企业
            $http.post(API.companyInfoByUserId, {id: getUserInfo().id}).then((res: any) => {
                if (res.success) {
                    this.backRefresh = true;
                    this.companyInfo = res.data;
                    this.data.companyId = res.data.id;
                    this.dateChange();
                } else {
                    Toast({
                        message: '获取企业信息失败',
                        position: 'bottom',
                        duration: 3000
                    });
                }
            });
            let date = new Date();
            let month = date.getMonth() + 1;
            let mm: string;
            if (month < 10) {
                mm = "0" + month;
            } else {
                mm = month.toString();
            }
            this.data.dataMonth = date.getFullYear() + "-" + mm;
        }

        dateChange() {
            if (!this.data.dataMonth) {
                return;
            }
            if (!verdictDate(this.data.dataMonth)) {
                this.data.dataMonth += "-01";
            }
            $http.post(API.dynamicHumanInfoByMonth, {
                dataMonth: this.data.dataMonth,
                companyId: this.data.companyId
            }).then((res: any) => {
                if (res.success) {
                    this.backRefresh = true;
                    if (res.data) {
                        this.data = res.data;
                        MessageBox({
                            title: '提示',
                            message: '当前选中月份也有数据,重复填写提交会覆盖原有数据',
                            showCancelButton: false
                        })
                    } else {
                        this.data = {
                            dataMonth: this.data.dataMonth,
                            companyId: this.companyInfo.id
                        }
                    }
                } else {
                    Toast({
                        message: '操作失败',
                        position: 'bottom',
                        duration: 3000
                    });
                }
            });
        }

        //保存
        insert() {
            if (!this.data.dataMonth) {
                Toast({message: '请选择数据所属月份！', position: 'bottom', duration: 3000});
                return;
            }
            if (!this.data.beforeMonthEndWorkCount) {
                Toast({message: '请填写上月末从业人员数！', position: 'bottom', duration: 3000});
                return;
            }
            if (!this.data.realWorkCount) {
                Toast({message: '请填写本期实际招工人员数！', position: 'bottom', duration: 3000});
                return;
            }
            if (!this.data.thisMonthLackCount) {
                Toast({message: '请填写本月缺工人员数！', position: 'bottom', duration: 3000});
                return;
            }
            if (!this.data.thisMonthLessCount) {
                Toast({message: '请填写本月减员人员数！', position: 'bottom', duration: 3000});
                return;
            }
            if (!this.data.thisMonthEndWorkCount) {
                Toast({message: '请填写月末从业人员数！', position: 'bottom', duration: 3000});
                return;
            }
            // 校验公式
            if (Number(this.data.thisMonthEndWorkCount) != Number(this.data.beforeMonthEndWorkCount) + Number(this.data.realWorkCount) - Number(this.data.thisMonthLessCount)) {
                Toast({message: '月末从业人员数 = 上月末从业人员数 + 本期实际招工人员数 - 本月减员人员数!', position: 'bottom', duration: 5000});
                return;
            }
            if (Number(this.data.thisMonthLackCount) != Number(this.data.expectWorkCount) - Number(this.data.realWorkCount)) {
                if (!(Number(this.data.expectWorkCount) - Number(this.data.realWorkCount) <= 0 && Number(this.data.thisMonthLackCount) == 0)) {
                    Toast({message: '本月缺工人数 = 期望招工人数 - 本期实际招工人员数!', position: 'bottom', duration: 5000});
                    return;
                }
            }

            if (!verdictDate(this.data.dataMonth)) {
                this.data.dataMonth += "-01";
            }
            $http.post(API.dynamicHumanInfoInsert, this.data).then((res: any) => {
                if (res.success) {
                    this.backRefresh = true;
                    Toast({
                        message: '操作成功',
                        position: 'bottom',
                        duration: 3000
                    });
                } else {
                    Toast({
                        message: '操作失败',
                        position: 'bottom',
                        duration: 3000
                    });
                }
            });
        }
    }
</script>

<style scoped lang="scss">
    .tip {
        padding: 1px 16px;
        background-color: #ecf8ff;
        border-radius: 4px;
        border-left: 5px solid #50bfff;
        margin: 10px 0;
    }

    .el-form {
        padding: 15px;
    }

    .el-select {
        width: 100%;
    }

    .el-radio {
        width: 50%;
        margin-right: 0;
        margin-top: 5px;
    }

    .item {
        width: 100%;
        font-size: 14px;
        padding: 10px 0;
        border-bottom: 1px dashed #f1f1f1;
    }

    .item:last-child {
        border: none;
    }

    .item .left {
        float: left;
        width: 120px;
        line-height: 1.4;
        color: #333;
        text-align: right;
        margin-right: 10px;
    }

    .item .over {
        overflow: hidden;
        line-height: 1.4;
        color: #999;
    }

    .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 100%;
    }
</style>
